| Blockly Brand Guidelines |
| ----- |
| *Solutions for real problems.* |
| Products covered in this document **Product** **Group** **Tagline** **Blockly** Parent Platform *Solutions for real problems.* **Blockly Education** Projects · Hosted *Never Miss a Block.* **Education Admin** Projects · Internal *Manage with confidence.* **Blockly SubTrack** Projects · New *Every subscription, accounted for.* **Blockly OSS** Open Source · Umbrella *Open. Built to last.* **Blockly OSS Education** Open Source · Standalone *Open-source scheduling, for everyone.* **Blockly Staff** Internal · Team *The team behind the platform.* Blockly Brand Guidelines — 2026 |

# **1\. Introduction**

Blockly is a platform built around one idea: the best tools come from solving problems you live with every day. Every product under the Blockly umbrella starts from a genuine internal need, then is refined and polished until it is ready to share with the world.

This document is the single source of truth for the Blockly brand. It covers the overarching visual system, typography, color, and tone — then provides a dedicated section for each product with its own colors, logo files, messaging, and usage rules.

|  | How to use this document Read Section 2–5 for the global system that applies to all products. Then refer to your product’s dedicated section (6 onwards) for product-specific colors, logo files, and messaging. |
| :---- | :---- |

# **2\. Brand Structure**

The Blockly brand is structured as a parent identity with two product groups and one internal team:

| Level | Name | Group | Primary Color |
| :---- | :---- | :---- | :---- |
| Blockly | Parent Platform | \#2563EB |  |
| Blockly Education | Projects · Hosted | \#0284C7 |  |
| Education Admin | Projects · Internal | \#0284C7 |  |
| Blockly SubTrack | Projects · New | \#059669 |  |
| Blockly OSS | Open Source · Umbrella | \#7C3AED |  |
| Blockly OSS Education | Open Source · Standalone | \#9333EA |  |
| Blockly Staff | Internal · Team | \#475569 |  |

# **3\. Global Color System**

## **3.1  Shared Utility Colors**

These colors are shared across all products. They do not change per product and cover all non-brand UI states.

| Swatch | Name | Hex | Usage |
| ----- | :---- | :---- | :---- |
|  | **Dark Text** | \#0F172A | All headings and body text |
|  | **Secondary Text** | \#6B7280 | Captions, subtext, metadata |
|  | **Light Background** | \#F8FAFC | Page backgrounds and card surfaces |
|  | **Border / Divider** | \#E2E8F0 | Table lines, horizontal rules, dividers |
|  | **Success** | \#10B981 | Success states and confirmation badges |
|  | **Warning** | \#F59E0B | Alerts and caution states |
|  | **Error** | \#EF4444 | Errors and destructive action states |

## **3.2  Product Color Overview**

Each product carries its own primary, dark, and accent color. These are defined fully in each product’s section below.

| Product | Primary | Dark | Accent | Usage |
| :---- | ----- | ----- | ----- | :---- |
| **Blockly** |  |  |  | Parent Platform |
| **Blockly Education** |  |  |  | Projects · Hosted |
| **Education Admin** |  |  |  | Projects · Internal |
| **Blockly SubTrack** |  |  |  | Projects · New |
| **Blockly OSS** |  |  |  | Open Source · Umbrella |
| **Blockly OSS Education** |  |  |  | Open Source · Standalone |
| **Blockly Staff** |  |  |  | Internal · Team |

## **3.3  Dark Mode**

All products follow the same dark mode rules. The product primary color is retained for interactive elements; only backgrounds and text change.

| Background \#0F172A | Body Text \#F8FAFC | Interactive Product primary color |
| :---- | :---- | :---- |

# **4\. Typography**

Two typefaces define the Blockly visual voice and are shared across all products. Outfit is reserved exclusively for headings and wordmarks. Inter handles all UI text, body copy, and captions.

| Outfit Headings · Wordmarks · Sub-labels Bold (700) for wordmarks and H1 Semibold (600) for sub-labels and H2 H1: 32px   H2: 24px   H3: 20px Wordmark: 26px   Sub-label: 17px | Inter Body · UI · Captions Regular (400) for body and captions Medium (500) for UI labels and buttons Body: 16px   Small: 14px   Caption: 12px |
| :---- | :---- |

# **5\. Logo System — Global Rules**

## **5.1  File Format & Resolution**

All logos and icons are provided as SVG. SVG is the required format for all digital use. Rasterise to PNG only when the target format requires it (e.g. app store submissions).

| Variant | Dimensions | Use Case |
| :---- | :---- | :---- |
| \*-Icon.svg | 512 × 512px (16:16) | Favicon, app icon, avatar, any small square context |
| \*-Logo.svg | Variable width × 72px | Full wordmark — light or white backgrounds |
| \*-Logo-Dark.svg | Variable width × 72px | Full wordmark — dark or coloured backgrounds |

## **5.2  Wordmark Construction**

All logos share identical vertical rhythm: the "Blockly" label sits at font-size 26 (Outfit Bold), and the product sub-label sits at font-size 17 (Outfit Semibold) below it. The parent Blockly mark has a single centred wordmark at font-size 30 with no sub-label.

|  | Clear Space Maintain padding equal to the icon height on all four sides of any logo. Never place text, other logos, or graphic elements within this zone. |
| :---- | :---- |

## **5.3  Global Do / Don't**

* Always use the correct product logo for the context — the parent mark is not a substitute for a product mark

* Always switch to the \-Logo-Dark variant on backgrounds darker than \#4B5563

* Always use SVG; rasterise only when required by the platform

* Do not recolour, stretch, rotate, or skew any logo or icon

* Do not place a logo on a busy photographic background without a solid overlay or card

* Do not mix product colors across different product contexts in the same UI

# **6\. Brand Voice**

Blockly builds tools that solve problems we have lived ourselves. The voice is direct, practical, and confident — not corporate. We ship things that work.

| Direct | say what the product does, plainly |
| :---- | :---- |
| **Practical** | lead with the problem solved, not the feature list |
| **Confident** | we built it because we needed it; we know it works |
| **Human** | written by a team, for real people |

# **7\. Blockly**

| Blockly *Solutions for real problems.* |
| :---- |
| **The platform that unifies everything Blockly builds.** **Group:** Parent Platform **Audience:** All users — cross-product communications, website, marketing. Platform-level identity used across all Blockly surfaces Shared design system and brand guidelines Website, press, and cross-product communications |

## **Colors**

| Swatch | Name | Hex | Usage |
| ----- | :---- | :---- | :---- |
|  | **Primary** | \#2563EB | Brand color — buttons, links, accents |
|  | **Dark** | \#1D4ED8 | Hover states, header bands, depth |
|  | **Accent** | \#93C5FD | Backgrounds, subtle highlights |

## **Logo & Icon**

Icon concept: Four bold squares in a 2×2 grid. The diagonal colour rhythm (primary / accent / dark / primary) suggests a modular, expandable platform without being product-specific.

| File | Use Case |
| :---- | :---- |
| Blockly-Icon.svg | Favicon, app icon, avatar (512×512, 16:16 square) |
| Blockly-Logo.svg | Full logo — light backgrounds |
| Blockly-Logo-Dark.svg | Full logo — dark or coloured backgrounds |

## **Messaging**

| Tagline | *Solutions for real problems.* |
| :---- | :---- |
| **Short** | The platform that unifies everything Blockly builds. |

## **Usage Rules**

Do: Use the Blockly parent mark only for platform-level communications. Never use it as a substitute for a product mark.

|  | Key Rule Always use the Blockly-Logo.svg on light backgrounds and Blockly-Logo-Dark.svg on dark or coloured backgrounds. Never substitute another product’s mark. |
| :---- | :---- |

# **8\. Blockly Education**

| Blockly Education *Never Miss a Block.* |
| :---- |
| **An invite-only school schedule tracker built around block rotations.** **Group:** Projects · Hosted **Audience:** Students at schools running block rotation schedules. Automatic block rotation tracking Class reminders before each period Invite-only access during beta |

## **Colors**

| Swatch | Name | Hex | Usage |
| ----- | :---- | :---- | :---- |
|  | **Primary** | \#0284C7 | Brand color — buttons, links, accents |
|  | **Dark** | \#0369A1 | Hover states, header bands, depth |
|  | **Accent** | \#7DD3FC | Backgrounds, subtle highlights |

## **Logo & Icon**

Icon concept: Block calendar — a rounded calendar body with header band, two pin tabs, and a 2×3 grid of schedule blocks inside. The accent block at centre-bottom provides a visual anchor.

| File | Use Case |
| :---- | :---- |
| Blockly-Education-Icon.svg | Favicon, app icon, avatar (512×512, 16:16 square) |
| Blockly-Education-Logo.svg | Full logo — light backgrounds |
| Blockly-Education-Logo-Dark.svg | Full logo — dark or coloured backgrounds |

## **Messaging**

| Tagline | *Never Miss a Block.* |
| :---- | :---- |
| **Short** | An invite-only school schedule tracker built around block rotations. |

## **Usage Rules**

Do: Use for the student-facing Education app, onboarding materials, and invite communications.

|  | Key Rule Always use the Blockly-Education-Logo.svg on light backgrounds and Blockly-Education-Logo-Dark.svg on dark or coloured backgrounds. Never substitute another product’s mark. |
| :---- | :---- |

# **9\. Education Admin**

| Education Admin *Manage with confidence.* |
| :---- |
| **The internal management layer for Blockly Education.** **Group:** Projects · Internal **Audience:** Blockly staff managing the Education platform. User and invite management School schedule configuration Platform health and admin tooling |

## **Colors**

| Swatch | Name | Hex | Usage |
| ----- | :---- | :---- | :---- |
|  | **Primary** | \#0284C7 | Brand color — buttons, links, accents |
|  | **Dark** | \#0369A1 | Hover states, header bands, depth |
|  | **Accent** | \#7DD3FC | Backgrounds, subtle highlights |

## **Logo & Icon**

Icon concept: Same block calendar as Education, with a lock badge in the bottom-right corner — immediately signals an admin or restricted-access context while staying visually related to the student app.

| File | Use Case |
| :---- | :---- |
| Blockly-Education-Admin-Icon.svg | Favicon, app icon, avatar (512×512, 16:16 square) |
| Blockly-Education-Admin-Logo.svg | Full logo — light backgrounds |
| Blockly-Education-Admin-Logo-Dark.svg | Full logo — dark or coloured backgrounds |

## **Messaging**

| Tagline | *Manage with confidence.* |
| :---- | :---- |
| **Short** | The internal management layer for Blockly Education. |

## **Usage Rules**

Do: Use for internal admin UI, staff documentation, and any surface where the admin tool needs to be identified distinctly from the student app.

|  | Key Rule Always use the Blockly-Education-Admin-Logo.svg on light backgrounds and Blockly-Education-Admin-Logo-Dark.svg on dark or coloured backgrounds. Never substitute another product’s mark. |
| :---- | :---- |

# **10\. Blockly SubTrack**

| Blockly SubTrack *Every subscription, accounted for.* |
| :---- |
| **A subscription tracking app built because recurring costs are harder to manage than they should be.** **Group:** Projects · New **Audience:** Individuals and small teams tracking recurring subscriptions. Central subscription dashboard Renewal alerts before charges Per-subscription ownership and cost summaries |

## **Colors**

| Swatch | Name | Hex | Usage |
| ----- | :---- | :---- | :---- |
|  | **Primary** | \#059669 | Brand color — buttons, links, accents |
|  | **Dark** | \#047857 | Hover states, header bands, depth |
|  | **Accent** | \#6EE7B7 | Backgrounds, subtle highlights |

## **Logo & Icon**

Icon concept: A card with a rising bar chart and a recurring circular arrow in the header. The chart conveys financial visibility; the arrow conveys the recurring nature of subscriptions.

| File | Use Case |
| :---- | :---- |
| Blockly-SubTrack-Icon.svg | Favicon, app icon, avatar (512×512, 16:16 square) |
| Blockly-SubTrack-Logo.svg | Full logo — light backgrounds |
| Blockly-SubTrack-Logo-Dark.svg | Full logo — dark or coloured backgrounds |

## **Messaging**

| Tagline | *Every subscription, accounted for.* |
| :---- | :---- |
| **Short** | A subscription tracking app built because recurring costs are harder to manage than they should be. |

## **Usage Rules**

Do: Use for the SubTrack app, product pages, and any SubTrack-specific communications. Do not mix SubTrack green with Education or OSS contexts.

|  | Key Rule Always use the Blockly-SubTrack-Logo.svg on light backgrounds and Blockly-SubTrack-Logo-Dark.svg on dark or coloured backgrounds. Never substitute another product’s mark. |
| :---- | :---- |

# **11\. Blockly OSS**

| Blockly OSS *Open. Built to last.* |
| :---- |
| **The home for all Blockly open-source projects.** **Group:** Open Source · Umbrella **Audience:** Developers, contributors, and anyone building on Blockly open-source work. All Blockly open-source projects under one umbrella Permissive licensing — use, fork, and extend freely Open to community contributions |

## **Colors**

| Swatch | Name | Hex | Usage |
| ----- | :---- | :---- | :---- |
|  | **Primary** | \#7C3AED | Brand color — buttons, links, accents |
|  | **Dark** | \#6D28D9 | Hover states, header bands, depth |
|  | **Accent** | \#C4B5FD | Backgrounds, subtle highlights |

## **Logo & Icon**

Icon concept: Git branch node diagram — three nodes connected by lines, the universal open-source metaphor. The accent node signals the branch point; white nodes are the endpoints.

| File | Use Case |
| :---- | :---- |
| Blockly-OSS-Icon.svg | Favicon, app icon, avatar (512×512, 16:16 square) |
| Blockly-OSS-Logo.svg | Full logo — light backgrounds |
| Blockly-OSS-Logo-Dark.svg | Full logo — dark or coloured backgrounds |

## **Messaging**

| Tagline | *Open. Built to last.* |
| :---- | :---- |
| **Short** | The home for all Blockly open-source projects. |

## **Usage Rules**

Do: Use for the OSS umbrella, GitHub organisation profile, and open-source documentation. Violet differentiates the OSS family clearly from Projects.

|  | Key Rule Always use the Blockly-OSS-Logo.svg on light backgrounds and Blockly-OSS-Logo-Dark.svg on dark or coloured backgrounds. Never substitute another product’s mark. |
| :---- | :---- |

# **12\. Blockly OSS Education**

| Blockly OSS Education *Open-source scheduling, for everyone.* |
| :---- |
| **A standalone, self-hostable block schedule tracker.** **Group:** Open Source · Standalone **Audience:** Schools with technical teams and developers wanting a self-hosted scheduling solution. Fully self-hostable Separate standalone project — not a fork of the hosted app Extensible and community-contribution-friendly |

## **Colors**

| Swatch | Name | Hex | Usage |
| ----- | :---- | :---- | :---- |
|  | **Primary** | \#9333EA | Brand color — buttons, links, accents |
|  | **Dark** | \#7E22CE | Hover states, header bands, depth |
|  | **Accent** | \#D8B4FE | Backgrounds, subtle highlights |

## **Logo & Icon**

Icon concept: Git branch nodes (OSS family) with two calendar tab nubs at the top — visually bridges the OSS and Education identities. The tab nubs are the only element borrowed from the Education icon.

| File | Use Case |
| :---- | :---- |
| Blockly-OSS-Education-Icon.svg | Favicon, app icon, avatar (512×512, 16:16 square) |
| Blockly-OSS-Education-Logo.svg | Full logo — light backgrounds |
| Blockly-OSS-Education-Logo-Dark.svg | Full logo — dark or coloured backgrounds |

## **Messaging**

| Tagline | *Open-source scheduling, for everyone.* |
| :---- | :---- |
| **Short** | A standalone, self-hostable block schedule tracker. |

## **Usage Rules**

Do: Use for the OSS Education repository, documentation, and any self-hosted deployment context. Purple distinguishes it from the hosted Education app (cyan) while staying within the OSS family.

|  | Key Rule Always use the Blockly-OSS-Education-Logo.svg on light backgrounds and Blockly-OSS-Education-Logo-Dark.svg on dark or coloured backgrounds. Never substitute another product’s mark. |
| :---- | :---- |

# **13\. Blockly Staff**

| Blockly Staff *The team behind the platform.* |
| :---- |
| **The people who build and run Blockly.** **Group:** Internal · Team **Audience:** Internal use and occasional public-facing contexts such as team pages and events. Team pages, credits, and public appearances Internal communications and org documents Conference and event representation |

## **Colors**

| Swatch | Name | Hex | Usage |
| ----- | :---- | :---- | :---- |
|  | **Primary** | \#475569 | Brand color — buttons, links, accents |
|  | **Dark** | \#334155 | Hover states, header bands, depth |
|  | **Accent** | \#94A3B8 | Backgrounds, subtle highlights |

## **Logo & Icon**

Icon concept: Two overlapping geometric person silhouettes — a primary white figure and an accent-coloured figure behind. Clean and human without being illustrative.

| File | Use Case |
| :---- | :---- |
| Blockly-Staff-Icon.svg | Favicon, app icon, avatar (512×512, 16:16 square) |
| Blockly-Staff-Logo.svg | Full logo — light backgrounds |
| Blockly-Staff-Logo-Dark.svg | Full logo — dark or coloured backgrounds |

## **Messaging**

| Tagline | *The team behind the platform.* |
| :---- | :---- |
| **Short** | The people who build and run Blockly. |

## **Usage Rules**

Do: Use for team pages, event appearances, internal documents, and anywhere the Blockly team itself is the subject rather than a specific product.

|  | Key Rule Always use the Blockly-Staff-Logo.svg on light backgrounds and Blockly-Staff-Logo-Dark.svg on dark or coloured backgrounds. Never substitute another product’s mark. |
| :---- | :---- |

# **14\. Asset File Index**

All SVG files are named using PascalCase. Font files (Outfit, Inter) must be sourced from Google Fonts.

| File | Type | Background |
| :---- | :---- | :---- |
| Blockly-Icon.svg | Icon (512×512) | Any — transparent background |
| Blockly-Logo.svg | Full Logo | Light / white |
| Blockly-Logo-Dark.svg | Full Logo | Dark / coloured |
| Blockly-Education-Icon.svg | Icon (512×512) | Any — transparent background |
| Blockly-Education-Logo.svg | Full Logo | Light / white |
| Blockly-Education-Logo-Dark.svg | Full Logo | Dark / coloured |
| Blockly-Education-Admin-Icon.svg | Icon (512×512) | Any — transparent background |
| Blockly-Education-Admin-Logo.svg | Full Logo | Light / white |
| Blockly-Education-Admin-Logo-Dark.svg | Full Logo | Dark / coloured |
| Blockly-SubTrack-Icon.svg | Icon (512×512) | Any — transparent background |
| Blockly-SubTrack-Logo.svg | Full Logo | Light / white |
| Blockly-SubTrack-Logo-Dark.svg | Full Logo | Dark / coloured |
| Blockly-OSS-Icon.svg | Icon (512×512) | Any — transparent background |
| Blockly-OSS-Logo.svg | Full Logo | Light / white |
| Blockly-OSS-Logo-Dark.svg | Full Logo | Dark / coloured |
| Blockly-OSS-Education-Icon.svg | Icon (512×512) | Any — transparent background |
| Blockly-OSS-Education-Logo.svg | Full Logo | Light / white |
| Blockly-OSS-Education-Logo-Dark.svg | Full Logo | Dark / coloured |
| Blockly-Staff-Icon.svg | Icon (512×512) | Any — transparent background |
| Blockly-Staff-Logo.svg | Full Logo | Light / white |
| Blockly-Staff-Logo-Dark.svg | Full Logo | Dark / coloured |

Blockly Brand Guidelines — 2026   ·  Internal & External Use